<template>
  <view class="container">
    <!-- 搜索框 -->
    <view class="search-bar">
      <input v-model="searchQuery" class="search-input" placeholder="请输入搜索内容" />
      <button @click="handleSearch" class="search-button">搜索</button>
    </view>

    <!-- 项目列表 -->
     <view v-for="(item, index) in WashingCarList" :key="index" class="item" @click="goToDetails(item)">
        <view class="item-content">
        <!-- 左侧图片 -->
        <image :src="item.imageUrl" class="item-image" />
        <view class="item-details">
          <!-- 第一层：项目名称和距离 -->
          <view class="first-layer">
            <view class="item-name">{{ item.name }}</view>
            <view class="item-distance">{{ item.distance }} m</view>
          </view>

          <!-- 第二层：星级评分、评分数字和销量 -->
          <view class="second-layer">
            <view class="item-rating">
              <view v-for="star in 5" :key="star" class="star" :class="{ filled: star <= item.rating }">★</view>
            </view>
            <view class="item-rating-number">{{ item.rating }}分</view>
            <view class="item-sales">销量: {{ item.sales }}</view>
          </view>

          <!-- 第三层：营业时间 -->
          <view class="third-layer">
            <view class="item-business-hours">{{ item.businessHours }}</view>
          </view>

          <!-- 第四层：店铺地址 -->
          <view class="fourth-layer">
            <view class="item-address">{{ item.address }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 假设从API获取的数据
const WashingCarList = ref([
  {
    imageUrl: 'https://example.com/image1.jpg',
    name: '洗车店1',
    distance: 500,
    rating: 4,
    sales: 123,
    businessHours: '周一至周日 09:00-18:00',
    address: '北京市朝阳区...',
  },
  {
    imageUrl: 'https://example.com/image2.jpg',
    name: '洗车店2',
    distance: 300,
    rating: 5,
    sales: 98,
    businessHours: '周二至周五 10:00-20:00',
    address: '上海市浦东新区...',
  }
]);

// 搜索框内容
const searchQuery = ref('');

// 搜索按钮点击处理
const handleSearch = () => {
  console.log('搜索内容:', searchQuery.value);
};

// 点击跳转到详情页
const goToDetails = (item) => {
  const itemStr = JSON.stringify(item); // 将店铺信息转换为字符串
  uni.navigateTo({
    url: `/pages/carwashing/washingdetails/washingdetails?item=${encodeURIComponent(itemStr)}`, // 使用 URL 编码
  });
};
console.log(WashingCarList.value)

</script>


<style scoped>
/* 样式保持不变 */
.container {
  padding: 20px;
}

.search-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  padding: 8px 12px;
  border-radius: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.search-input {
  flex: 1;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 16px;
  font-size: 14px;
}

.search-button {
  padding: 0 12px;
  height: 32px;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 16px;
  font-size: 14px;
}

.item {
  display: flex;
  margin-top: 20px;
  padding: 10px;
  border-bottom: 1px solid #f0f0f0;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-size: 14px;
}

.item-content {
  display: flex;
  width: 100%;
}

.item-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
}

.item-details {
  flex: 1;
  margin-left: 12px;
}

.first-layer, .second-layer, .third-layer, .fourth-layer {
  margin-bottom: 10px;
}

.item-name {
  font-weight: bold;
  font-size: 16px;
  color: #000;
}

.item-distance {
  color: blue;
  font-size: 14px;
}

.second-layer {
  display: flex;
  align-items: center;
}

.item-rating {
  display: flex;
}

.star {
  color: #ccc;
  margin-right: 2px;
}

.star.filled {
  color: #ffcc00;
}

.item-rating-number {
  margin-left: 10px;
  font-size: 14px;
  color: #333;
}

.item-sales {
  margin-left: 10px;
  font-size: 14px;
  color: #333;
}

.item-business-hours {
  font-size: 14px;
  color: #666;
}

.item-address {
  font-size: 14px;
  color: #333;
}
</style>
